<template>
    <div class="cmt-container">
        <h3>发表评论{{id}}</h3>
        <hr>
        <textarea placeholder="请输入要评论的内容(最多120字)" maxlength="120" v-model="msg">

        </textarea>
        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

        <!-- 评论内容 -->
        <div class="cmt-list" v-for="(item,i) in comments" :key="item.id">
            <div class="cmt-item">
                <div class="cmt-title">
                    <span>第{{i+1}}楼&nbsp;&nbsp;{{item.user_name}}</span>
                    <span>时间：{{item.add_time | dateFormat}}</span>
                </div>
                <div class="cmt-body">
                    {{item.message}}
                </div>
            </div>
        </div>  
        
        <mt-button  type="danger" size="large" plain @click="getMore">加载更多</mt-button>        
   
    </div>
    
</template>

<script>
// 弹窗
import { Toast } from "mint-ui";
export default {
  data() {
    return {
        // id: this.$route.params.id,
        // 默认展示第一页数据
        pageIndex:9,
        //评论数据
        comments:[
            {id:1,user_name:'匿名用户1',message:'这是我的第一条评论',add_time:"2018/12/15 12:45:20"},
            {id:2,user_name:'匿名用户2',message:'这是我的第二条评论',add_time:"2018/12/16 12:45:20"},
            {id:3,user_name:'匿名用户3',message:'这是我的第三条评论',add_time:"2018/12/17 12:45:20"},
            {id:4,user_name:'匿名用户4',message:'这是我的第四条评论',add_time:"2018/12/18 12:45:20"},
            {id:5,user_name:'匿名用户5',message:'这是我的第五条评论',add_time:"2018/12/11 12:45:20"},
            {id:6,user_name:'匿名用户6',message:'这是我的第六条评论',add_time:"2018/12/12 12:45:20"},
            {id:7,user_name:'匿名用户7',message:'这是我的第七条评论',add_time:"2018/12/13 12:45:20"},
            {id:8,user_name:'匿名用户8',message:'这是我的第八条评论',add_time:"2018/12/14 12:45:20"},
        ],
        // 评论输入的内容
        msg:'',
    };
  },
  created() {
      this.getComments();
   
  },
  methods: {
      // 获取第一页评论数据
    getComments() {
      if (this.newsinfolist != "") {

        let instance = Toast({
        //   message: "加载评论成功!",
          duration: 1000,
          position: "middle"
        });
        setTimeout(() => {
          instance.close();
        }, 2000);
      } else {
        Toast("加载新闻评论失败!");
      }
    },
    // 获取更多数据的点击加载更多按钮事件
    getMore(){
        this.pageIndex++;
        this.getComments();
    },

    // 发表评论
    postComment(){
        // 校验是否为空内容  。去掉空格后，数据的长度是否等于0
        if(this.msg.trim().length === 0){
            return Toast("评论内容不能为空!");
        }
        // 处理通过数据库得到的数据
        // this.$http.post("api/postcomment/"+this.$route.params.id,{
        //     content:this.msg.trim()
        // }).then(function(result){
        //     if(result.body.status ===0){
        //         // 1. 拼接处一个评论对象
        //         var cmt = {
        //             user_name:'匿名用户',add_time:Date.now(),content:this.msg.trim()
        //         };
        //         this.comments.unshift(cmt);
        //         this.msg='';
        //     }
        // })
        
        // 把填写的内容增加到数组的第一列
        var cmt = {
     
            id:this.pageIndex++,user_name:'匿名用户',add_time:Date.now(),message:this.msg.trim()
         
        }
        this.comments.unshift(cmt);
        this.msg='';
        Toast("评论成功!");
    }


  },

  // 使用新闻详情中的评论子组件的id
  props:["id"],
}
</script>




<style lang="scss" scoped>
// 底部 加载更多 距离底部的设置
.mint-button--danger.is-plain{
    margin-bottom: 75px;

}
    .cmt-container{
       
        h3{
            font-size:18px;
        }
        textarea{
            margin: 0;
            font-size: 14px;
            height: 85px;
        }
        .cmt-list{
            margin: 5px 0;
           .cmt-item{
               font-size: 13px;
                .cmt-title{
                    display: flex;
                    justify-content: space-between;
                    line-height: 30px;
                    background-color: #ccc;
                }   
                .cmt-body{
                    line-height: 35px;
                    text-indent: 2em;
                }
           } 
        }

    }
</style>
